<template>
  <el-card class="page-order">
    <div slot="header">商品统计</div>
    <!-- 搜索框 -->
    <div class="search-box">
      时间范围
      <el-date-picker size="mini" v-model="date" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
      </el-date-picker>
      <el-button size="mini" type="primary">查询</el-button>
    </div>

    <!-- echarts -->
   
    <chart-bar v-if="Object.keys(chartData).length" :chart-data="chartData"></chart-bar>

</el-card>
</template>

<script>

import { getOrderTotalReq } from "@/api/order";
import { formatYMDhms } from "@/filters";
import * as echarts from "echarts";
import ChartBar from './ChartBar.vue';
export default {
  components: {
    ChartBar,
  },
  data() {
    return {
      date: [],
      chartData:{}
    };
  },
  methods: {
    async getData() {
      let res = await getOrderTotalReq({
        date: JSON.stringify(this.date)
      })
      let { data } = res.data
      //画图
      let xData = data.map((v) => formatYMDhms(v.orderTime));
      let series = [
        {
          type: "bar",
          name: "金额数据",
          data: data.map((v) => v.orderAmount),
        },
      ];
      this.chartData={xData,
        series,}

      // this.renderLine({
      //   xData,
      //   series,

      // });

    },


  },
  created() {
    this.getData()
  }
}
</script>

<style lang="scss" scoped>
.myChart {
  margin-top: 50px;
  height: 300px;
  background: white;
}
</style>
